<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useUserStore } from '@/stores/user'
import { usePropertyStore } from '@/stores/property'
import PersonalCenter from '@/component/mainpage/PersonalCenter.vue'
import Money from '@/component/mainpage/money.vue'
import StartGame from '@/component/mainpage/StartGame.vue'
import InviteWindows from '@/component/invite-windows.vue'
import ws from '@/services/websocket'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const propertyStore = usePropertyStore()
const router = useRouter()

// 打印全局变量
function logData(){
  console.log('用户信息:', { uid: userStore.uid, nickname: userStore.nickename, profile: userStore.profile })
  console.log('资产信息:', {
    gold: propertyStore.gold,
    soul: propertyStore.soul,
    box1: propertyStore.box1,
    box2: propertyStore.box2,
    extra1: propertyStore.extra1,
    extra2: propertyStore.extra2,
    extra3: propertyStore.extra3,
    charactor: propertyStore.charactor_data,
  })
}

// 邀请提示数据与处理
const showInvite = ref(false)
const inviteNickname = ref('')
const inviteRoomId = ref('')
const invitePos = ref(null)
const inviteFromUid = ref('')

function handleBeInvited(message){
  inviteNickname.value = message?.nickname || ''
  inviteRoomId.value = message?.rid || ''
  invitePos.value = message?.pos ?? null
  inviteFromUid.value = message?.from_uid || ''
  showInvite.value = true
}
// 马上要跳转到房间页面了，正在接受
function handleHasInvited(message){
  console.log('hasinvited 消息：', message)
  // 带上房间玩家数据（players）与 invited2v2 模式，以及 position 与 rid
  const roomData = encodeURIComponent(JSON.stringify(message?.players ?? []))
  const position = message?.position ?? message?.pos ?? ''
  const rid = message?.rid ?? ''
  router.push({ path: '/pre-create-room/choose-friend-2v2', query: { model: 'invited2v2', room_data: roomData, position, rid } })
}
function acceptInvite(){
  showInvite.value = false
  try {
    const payload = {
      genre: 3,
      type: 'hasinvited',
      rid: inviteRoomId.value,
      uid: userStore.uid,
      nickname: userStore.nickename,
      reply: 1,
      fromuid: inviteFromUid.value,
      profile: userStore.profile,
      position: invitePos.value
    }
    ws.send(JSON.stringify(payload))
    console.log('已发送同意邀请：', payload)
  } catch (e) {
    console.error('发送同意邀请失败：', e)
  }
}
function rejectInvite(){ showInvite.value = false }

onMounted(() => {
  logData();
  ws.on(3, 'beinvited', handleBeInvited)
  ws.on(3, 'hasinvited', handleHasInvited)
})
onBeforeUnmount(() => { 
  ws.off(3, 'beinvited') 
  ws.off(3, 'hasinvited')
})
</script>

<template>
  <div class="main-layout">
    <video class="bg-video" src="http://117.72.17.45:5500/data/bks/bk2.mp4" autoplay muted loop playsinline></video>
    <section class="section top">
      <!-- 顶部区域 -->
      <div class="top-inner">
        <!--顶部左侧区域-->
        <div class="top-left">
          <PersonalCenter />
        </div>
        <div class="top-right">
          <Money />
        </div>
      </div>

    </section>
    <section class="section middle">
      <!-- 中部区域 -->
      <div class="middle-inner">
        <div class="middle-bottom-center">
          <StartGame />
        </div>
      </div>
    </section>
    <section class="section bottom">
      <!-- 底部区域 -->
       
    </section>

    <!-- 右下角邀请提示 -->
    <InviteWindows
      v-if="showInvite"
      :nickname="inviteNickname"
      :rid="inviteRoomId"
      :pos="invitePos"
      :duration="30"
      @accept="acceptInvite"
      @reject="rejectInvite"
      @close="rejectInvite"
    />
  </div>
</template>

<style scoped>
.main-layout {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: grid;
  grid-template-rows: 120px 1fr 140px; /* 上中下高度可按需调整 */
}
.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
}
.section { padding: 12px 16px; position: relative; z-index: 1; }
.top { /* 顶部样式占位 */ }
.top-inner {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左右两列 */
  gap: 12px;
  height: 100%;
}
.top-left, .top-right { background: rgba(255, 255, 255, 0); border-radius: 8px; }
.middle { /* 中部样式占位 */ }
.middle-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end; /* 贴近中部的下部 */
  justify-content: center; /* 水平居中 */
}
.middle-bottom-center {
  width: 45%; /* 宽度为整个的 1/3 */
  height: 100px; /* 可按需调整高度 */
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.bottom { /* 底部样式占位 */ }
</style>


